<template>
	<div class="box">
		<navBar :navBar="navBar"></navBar>
		<div class="content">
			<p v-html="detailInfo.editorValue" class="abc"></p>
		</div>
	</div>
</template>

<script>
	import navBar from "@/components/navBar.vue";
	export default {
		name: "helperDetail",
		components: {
			navBar
		},
		data() {
			return {
				navBar: {
					back: true,
					title: '',
					close: false,
					btn: "",
				},
				id: "",
				detailInfo: {},
			};
		},

		mounted() {
			if (this.$route.query.id) {
				this.id = this.$route.query.id;
				this.init();
			}
		},

		methods: {
			// 获取详情
			init() {
				let data = {
					helpId: this.id,
					language: String(this.$i18n.locale).toUpperCase()
				};
				$postAxios(api.getHelpDetail, data, (res) => {
					if (res.code == 0) {
						this.detailInfo = res.data;
					} else {
						this.$toast(this.$t(res.msg));
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background-color: #21212b;

		.content {
			padding: 15px;
			width: 100%;
			position: absolute;
			left: 0;
			top: 40px;
			bottom: 0;
			box-sizing: border-box;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;

			p {
				color: #fff;
				font-size: 12px;
			}

			.abc>>>span {
				background-color: #262633 !important;
				color: #fff !important;
			}
		}
	}
</style>